<template>
  <div id="app">
    <!-- <functional-demo2 :data="list" v-if="list.length > 0" />
    <el-skeleton animated :rows="3" v-else /> -->
    <layout-index>
      <template v-slot:elMainSlot>
        <div class="clearfix">
          <!-- 时间显示(filter) -->
          <time-con></time-con>
          <!-- 主题切换 -->
          <theme-tab-bar id="topBar"></theme-tab-bar>
        </div>
        <div class="test-viewport" data-skin="test">
          测试转换px to vw
          <a
            style="font-size: 18px"
            href="https://blog.csdn.net/qq_36288559/article/details/111880656?ops_request_misc=&request_id=&biz_id=102&utm_term=postcss-px-to-viewport&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-2-111880656.142^v9^control,157^v4^control&spm=1018.2226.3001.4187"
            >postcss-px-to-viewport</a
          >
          <p>这里用到css属性选择器[data-skin='test']</p>
        </div>
        <div class="smallexample">
          <p>e.target --> 触发事件源的DOM</p>
          <p>e.currentTarget --> 真正绑定事件源的DOM</p>
        </div>

        <transition
          translate
          mode="out-in"
          enter-active-class="animate__animated animate__bounceInLeft animate__faster"
          leave-active-class="animate__animated animate__backOutRight animate__faster"
        >
          <!-- 默认所有的路由所对应的组件都会在这里展示了,所以项目中至少有一个router-view,二级即以下的路由需要展示在哪可以自行确定,但是使终都是由第一个router-view确定下来的展示区域中进行展示 (注意:(我们不应该拿有router-view的组件来引入使用,会重复渲染内容(无意义操作)))-->
          <router-view />
        </transition>
      </template>
    </layout-index>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
// ! 一般最外就是router-view我这里给第一个router-view搭了很多DOM，这样其实是不好的
import layoutIndex from '@/layout/index.vue'
import ThemeTabBar from '@/components/换肤/index.vue'
// import routeViewTwo from '@/layout/index2.vue' // 二级路由展示区(我们不应该拿有router-view的组件来使用)
import timeCon from '@/components/时间(filter)/index.vue'
export default {
  name: 'App',
  components: { ThemeTabBar, layoutIndex, timeCon },
  data() {
    return {
      list: []
    }
  },
  /*  async created() {
    let list = await this.$api.recommended();
    this.list = list;
  }, */
  methods: {
    ...mapMutations({
      initThemeFn: 'app/setTheme'
    }),
    watchClick() {
      document.documentElement.addEventListener(
        'click',
        this._throttle(5, 1000)
        /*
       e.target --> 触发事件源的DOM
       e.currentTarget --> 真正绑定事件源的DOM
      */
      )
    },
    _throttle(num, timer = 2000, cb = null) {
      let count = 0
      let time = null
      return function (event) {
        console.log('aaaa')
        if (!time) {
          time = setTimeout(() => {
            cb && cb(event)
            time = null
            count = 0
          }, timer)
        } else {
          count++
          const isBtnorInput = event.target.tagName === 'input' || 'button'
          console.log(count)
          if (count >= num && isBtnorInput) this.$message('点击次数过多')
        }
      }
    }
  },
  computed: {},
  watch: {
    $route: {
      handler(val, oldval) {
        console.log('新路由', val) // 新路由信息
        console.log('老路由', oldval) // 老路由信息
        this.$nextTick(() => {
          console.log(document.querySelectorAll('a'))
          document.querySelectorAll('a').forEach((item) => {
            if (item.getAttribute('target')) return
            item.setAttribute('target', '_blank')
          })
        })
      }, // 深度观察监听
      immediate: true
    }
  },
  created() {},
  mounted() {
    console.log(
      document.documentElement.clientHeight,
      document.documentElement.clientWidth
    )
    // 初始一下css
    this.initThemeFn(this.$store.getters.theme)

    // this.watchClick()
  }
}
</script>

<style lang="less" scope>
#app {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 5px 5px 5px;
  width: 375px;
  overflow: hidden;

  #topBar {
    float: right;
  }
  .test-viewport {
    display: flex;
    flex-direction: column;
    width: 530px;
    height: auto;
    font-size: 20px;
    border-radius: 5px;
    overflow: hidden;
  }

  [data-skin='test'] {
    background: #13b5b1;
  }
}
</style>
